<template>
    <div class="chart_layout">
        <div class="pre">
            <div class="pre_title">
                <span class="title-text">客户群群发任务完成率</span>
                <el-button
                    v-auth="'CUST_GP_COP'"
                    :disabled="isNoMessage1"
                    @click="export2Img(myRef_one, '客户群群发任务完成率')"
                    >导出</el-button
                >
            </div>
            <div class="pre_content">
                <div v-show="!isNoMessage1" id="echarts" ref="myRef_one" class="min"></div>
                <div v-show="isNoMessage1" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="emty_title">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="pre">
            <div class="pre_title">
                <span class="title-text">客户群群发消息送达率</span>
                <el-button
                    v-auth="'CUST_GP_COP_SEND'"
                    :disabled="isNoMessage2"
                    @click="export2Img(myRef_two, '客户群群发消息送达率')"
                    >导出</el-button
                >
            </div>
            <div class="pre_content">
                <div v-show="!isNoMessage2" id="echarts" ref="myRef_two" class="min"></div>
                <div v-show="isNoMessage2" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="emty_title">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, inject, watch, nextTick } from 'vue';
import { export2Img } from '@/utils/utils';
const echarts = inject('ec');
const myRef_one = ref(null);
const isNoMessage1 = ref(false);
const myRef_two = ref(null);
const isNoMessage2 = ref(false);
const props = defineProps(['completionData', 'deliveryData']);
//客户群群发任务完成率
const getChart = (data: any) => {
    if (data.length == 0) {
        isNoMessage1.value = true;
        return;
    } else {
        isNoMessage1.value = false;
    }
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        series: [
            {
                type: 'pie',
                data: data,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {c}%'
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#ff0000', '#ffbe49'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
//客户群群发消息送达率
const getChart2 = (data: any) => {
    if (data.length == 0) {
        isNoMessage2.value = true;
        return;
    } else {
        isNoMessage2.value = false;
    }
    const myChart_two = echarts.init(myRef_two.value);
    myChart_two.setOption({
        series: [
            {
                type: 'pie',
                data: data,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {c}%'
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#259888', '#8bc24a'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_two.resize();
    });
    window.onresize = function () {
        myChart_two.resize();
    };
};
watch(
    () => props.completionData,
    val => {
        getChart(val);
    }
);
watch(
    () => props.deliveryData,
    val => {
        getChart2(val);
    }
);
</script>
<style lang="scss" scoped>
.chart_layout {
    flex: 1;
    margin-top: 16px;
    min-height: 546px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;

    .pre {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #eaeaea;

        &_title {
            padding: 12px 24px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .pre_content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .min {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .no_data {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 35px;
        }

        .emty_title {
            color: #909399;
            margin: 0;
        }
    }
}
</style>
